<template>
  <div style="height: calc(100vh - 50px)">
    <!--地图Div-->
    <div class="map-display" id="mapDiv"></div>
    <!--地图左上角按钮栏-->
    <div id="myToolBtns" class="mytool-btns">
      <div id="buttonDiv" style="float: left;">
        <div class="navbtn-items" v-if=layerShow @click="togglePanel('lyrPanelVisible','layerFlag')" title="图层" id="layerBtn">
          <img src="../../assets/images/map_icons/layer.png">
          <img v-show="layerFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <!--<div class="navbtn-items" v-if=legendShow @click="togglePanel('legendDivVisible','legendFlag')" title="图例" id="legendBtn">
          <img src="../../assets/images/map_icons/legend.png">
          <img v-show="legendFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>-->
        <div class="navbtn-items" v-if=measureShow @click="togglePanel('measurePanelVisible','measureFlag')" title="测量" id="measureBtn">
          <img src="../../assets/images/map_icons/measure.png">
          <img v-show="measureFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <!--<div class="navbtn-items" v-if=hawkEyeShow @click="togglePanel('hawkeyePanelVisible','hawkeyeFlag')" title="鹰眼" id="hawkeyeBtn">
          <img src="../../assets/images/map_icons/hawkeye.png">
          <img v-show="hawkeyeFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>-->
        <div class="navbtn-items" v-if=decorateShow @click="togglePanel('decoratePanelVisible','decorateFlag')" title="鹰眼" id="decorateBtn">
          <img src="../../assets/images/map_icons/Decorate.png">
          <img v-show="decorateFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

        <div class="navbtn-items" v-if=attrQueryPanelShow @click="togglePanel('attrQueryPanelVisible','attrQueryFlag')" title="鹰眼" id="attrQueryBtn">
          <img src="../../assets/images/map_icons/shuxing.png">
          <img v-show="attrQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=geometryQueryPanelShow @click="togglePanel('geometryQueryPanelVisible','geometryQueryFlag')" title="鹰眼" id="geometryQueryBtn">
          <img src="../../assets/images/map_icons/kongjian.png">
          <img v-show="geometryQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=distanceQueryPanelShow @click="togglePanel('distanceQueryPanelVisible','distanceQueryFlag')" title="鹰眼" id="distanceQueryBtn">
          <img src="../../assets/images/map_icons/juli.png">
          <img v-show="distanceQueryFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>

        <div class="navbtn-items" v-if=bufferAnalystPanelShow @click="togglePanel('bufferAnalystPanelVisible','bufferAnalystFlag')" title="测量" id="bufferAnalystBtn">
          <img src="../../assets/images/map_icons/huanchongqu.png">
          <img v-show="bufferAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=thiessenAnalystPanelShow @click="togglePanel('thiessenAnalystPanelVisible','thiessenAnalystFlag')" title="测量" id="thiessenAnalystBtn">
          <img src="../../assets/images/map_icons/duobianxing.png">
          <img v-show="thiessenAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <div class="navbtn-items" v-if=heatMapAnalystPanelShow @click="togglePanel('heatMapAnalystPanelVisible','heatMapAnalystFlag')" title="测量" id="heatMapAnalystBtn">
          <img src="../../assets/images/map_icons/relitu.png">
          <img v-show="heatMapAnalystFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>
        <!--<div class="navbtn-items" v-if=juanlianShow @click="togglePanel('juanlianPanelVisible','juanlianFlag')" title="卷帘对比" id="compareBtn">
          <img src="../../assets/images/map_icons/compare.png">
          <img v-show="juanlianFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>-->
        <!--<div class="navbtn-items" @click="togglePanel('ftTreeSelectVisible','regionFlag')" title="区域选择" id="regionBtn">
          <img src="../../assets/images/map_icons/location.png">
          <img v-show="regionFlag" src="../../assets/images/map_icons/selectPoint.png"
               class="item-selected">
        </div>-->

      </div>
    </div>

    <!--图层管理面板-->
    <div class="layerBox" :class="{'layer-hide':lyrPanelVisible}" :id="lyrBox">
      <div id="panelHeader">
        <div class="options lyropt">
          <span style="font-weight: bold;font-size: 1.2em;">图层管理面板</span>
          <el-checkbox @change="handleOpt" style="color: black; float: right;">图层透明度调节</el-checkbox>
        </div>
      </div>
    </div>

    <!--“量测”下拉-->
    <div class="mapMeasurementTools" :class="{'layer-hide':measurePanelVisible}">    <!--tool-item-panel v-if="measurePanelVisible"-->
      <div class="map-tool-item" title="测面积" @click="myMeasureArea">  <!--@click="triggerBus('area')"-->
        <img src="../../assets/images/map_icons/Area.png" />
        <span>面积</span>
      </div>
      <div class="map-tool-item" title="测距离" @click="myMeasureDistance">    <!--@click="triggerBus('distance')"-->
        <img src="../../assets/images/map_icons/Distance.png" />
        <span>距离</span>
      </div>
      <div class="map-tool-item" title="清除量测结果" @click="myClearMeasure">  <!-- @click="triggerBus('clean')"-->
        <img src="../../assets/images/map_icons/清空.svg" />
        <span>清除</span>
      </div>
    </div>

    <!--“整饰”下拉-->
    <div class="tool-item-panel mapDecorateTools" id="mapDecorateTools" :class="{'layer-hide':decoratePanelVisible}" data-toolPanel-title="Decorate">
      <div class="map-tool-item"  id="CoordinateDisplay" title="坐标" @click="coordinateShow=!coordinateShow">
        <img src="../../assets/images/map_icons/Coordinate.png">
        <span>坐标</span>
      </div>
      <div class="map-tool-item"  id="ScaleDisplay" title="比例尺" @click="scaleShow=!scaleShow">
        <img src="../../assets/images/map_icons/Scale.png">
        <span>比例尺</span>
      </div>
      <!--<div class="map-tool-item"  id="LegendDisplay" title="图例">
        <img src="../../assets/images/map_icons/legend_menuItem.png">
        <span>图例</span>
      </div>-->
      <!--<div class="map-tool-item"  id="GraticuleDisplay" title="经纬网格">
          <img src="../../dist/mapctrl/mcicons/Legend.png">
          <span>经纬网格</span>
      </div>-->
      <!--<div class="map-tool-item"  id="styleChange" title="调整矢量图层标签等样式">
        <img src="../../dist/img/navbtn/样式.png">
        <span>矢量标签</span>
      </div>-->
    </div>

    <!--坐标与比例尺-->
    <div class="coordinateAndScaleBar">
      <!--地图比例尺-->
      <div id="scaleBarDiv" class="map-scalebar" v-show="scaleShow">
        <div id="scaleBar"></div>
      </div>
      <!--地图坐标 (id必须为mouse-position，否则无法正常显示)-->
      <div class="map-decorate map-coordinate custom-mouse-position" id="mouse-position" v-show="coordinateShow"></div>
    </div>

    <!--基于supermap案例采用这个-->
    <!--<div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
    </div>-->
    <!--属性查询-->
    <div :class="{'layer-hide':attrQueryPanelVisible}">
      <el-select
        v-model="value1"
        multiple
        style="margin-left: 45px;"
        placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select
        v-model="value2"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button
        style="position:absolute;margin-left: 1em;"
        type="primary"
        icon="el-icon-search"
        @click="attrQuery"
      >
        查询
      </el-button>
    </div>

    <!--几何空间查询-->
    <div :class="{'layer-hide':geometryQueryPanelVisible}" style="margin-left: 45px; margin-top:20px;">
      <el-button
        style="position:absolute;margin-left: 1em;"
        type="success"
        round
        icon="el-icon-search"
        @click="geometryQuery"
      >
        几何查询
      </el-button>
      <el-button
        style="position:absolute;margin-left: 13em;"
        type="warning"
        plain
        size="small"
        @click="myClearGeometryQuery"
      >
        清除 / 取消
      </el-button>
    </div>

    <!--距离查询-->
    <div :class="{'layer-hide':distanceQueryPanelVisible}" style="margin-left: 45px; margin-top:60px;">
      <el-button
        style="position:absolute;margin-left: 1em;background-color: #1c84c6;"
        type="success"
        round
        icon="el-icon-search"
        @click="distanceQuery"
      >
        距离查询
      </el-button>
      <el-button
        style="position:absolute;margin-left: 13em;"
        type="warning"
        plain
        size="small"
        @click="myClearDistanceQuery"
      >
        清除 / 取消
      </el-button>
    </div>

    <!--缓冲区分析面板-->
    <div :class="{'layer-hide':bufferAnalystPanelVisible}" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>缓冲区分析面板</h3>
      缓冲半径：<input type="text" v-model="buffer_radius" />  <!--:value="buffer_radius"-->
      <input type="button" id="bufferAnalyst" value="开始分析"/>
      <br/>
    </div>

    <!-- (数据集)泰森多边形分析面板-->
    <div :class="{'layer-hide':thiessenAnalystPanelVisible}" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>(数据集)泰森多边形分析面板</h3>
      参数设置：<input type="text" value="10"/>
      <input type="button" id="thiessenAnalyst" value="开始分析"/>
      <br/>
    </div>

    <!--热力图分析面板-->
    <div :class="{'layer-hide':heatMapAnalystPanelVisible}" style="position:absolute; top:50px; right:50px;padding: 1em; background-color: rgba(255,255,255,0.5);z-index:1000">
      <h3>热力图分析面板</h3>
      热点半径：<input type="text" v-model="heatmap_radius" /> <!--:value="heatmap_radius"-->
      <br/>
      模糊尺寸：<input type="text" v-model="heatmap_blur" />  <!--:value="heatmap_blur"-->
      <input type="button" id="heatMapAnalyst" value="开始分析"/>
      <br/>
    </div>

  </div>
</template>

<script>
  //import {bus} from '../../bus.js'   //引入bus.js定义的空的Vue实例

  import 'ol/ol.css';
  import 'ol-ext/dist/ol-ext.css';
  import {Map,View,Overlay,Feature} from 'ol';
  import Popup from 'ol-ext/overlay/Popup'
  import { Tile, Group, Image, Vector as lVector, VectorTile as lVectorTile, Heatmap as lHeatMap } from 'ol/layer'
  import {XYZ, Vector} from 'ol/source'
  import { fromLonLat, toLonLat, get as projGet, getPointResolution } from 'ol/proj'
  import { GeoJSON } from 'ol/format'
  import Draw from 'ol/interaction/Draw'
  import { Style, Fill, Stroke, Circle, Text, Circle as CircleStyle, Icon } from 'ol/style'
  import {defaults, Attribution, Zoom, ZoomSlider, OverviewMap, ScaleLine, MousePosition} from 'ol/control';
  import { createStringXY } from 'ol/coordinate'
  import {Point,LineString,Polygon} from 'ol/geom'
  import { Logo, TileSuperMapRest, Tianditu, MeasureService, QueryService, SpatialAnalystService } from '@supermap/iclient-ol';
  import LayerSwitcher from 'ol-ext/control/LayerSwitcher'
  import { HeatMap as sHeatMap } from '@supermap/iclient-ol/overlay'

  export default {
    name:'MyMap',
    components: {
    },
    props: {
      mapCtrlTools:{
        type:Array,
        default:function () {
          return []
        }
      },
      lyrdata: {
        type: Array,
        default: []
      },
      mapParams: {
        type: Object,
        default: {}
      },
      spatialQueryConditions: {
        type: Array,
        //default: {}  //若这样设置，当父组件不往子组件传值或传空值的时候，将导致后续有forEach报错
        default: function () {  //设置成这样后，即使父组件不传值也不会造成影响
          return []
        }
      },
      pn: {  //parent_name的简称，即告诉此子组件，当前访问的父组件是谁，以便响应不同的业务逻辑
        type: String,
        default: function () {  //设置成这样后，即使父组件不传值也不会造成影响
          return ''
        }
      },
    },
    data () {
        return {
          /**地图各悬浮面板的可视状态**/
          lyrPanelVisible:true,  //默认true为隐藏
          legendDivVisible:true,  //默认true为隐藏
          measurePanelVisible:true, //默认true为隐藏
          decoratePanelVisible:true, //默认true为隐藏
          attrQueryPanelVisible:true, //默认true为隐藏
          geometryQueryPanelVisible:true, //默认true为隐藏
          distanceQueryPanelVisible:true, //默认true为隐藏
          bufferAnalystPanelVisible:true, //默认true为隐藏
          thiessenAnalystPanelVisible:true, //默认true为隐藏
          heatMapAnalystPanelVisible:true, //默认true为隐藏

          hawkeyePanelVisible:true, //默认true为隐藏
          orderLayerDialogVisible:true,  //默认true为隐藏
          newLayerDialogVisible:true,  //默认true为隐藏
          juanlianPanelVisible:true,  //默认true为隐藏
          ftTreeSelectVisible:true,  //默认true为隐藏
          coordinateShow: true, //2D坐标,默认false不显示
          scaleShow: true, //显示比例尺,默认false不显示
          /**地图左上角-功能启动图标按钮-初始化控制**/
          layerShow:false,//图层控制-功能启动图标按钮，默认false不显示
          legendShow:false,//图例-功能启动图标按钮，默认false不显示
          measureShow:false,//测量工具-功能启动图标按钮，默认false不显示
          hawkEyeShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          decorateShow:false,//鹰眼-功能启动图标按钮，默认false不显示
          juanlianShow:false,//卷帘-功能启动图标按钮，默认false不显示
          regionShow:false,//区域选择树-功能启动图标按钮，默认false不显示
          attrTableShow:false,//属性表格-功能启动图标按钮，默认false不显示
          mapQueryShow:false,//地图查询-功能启动图标按钮，默认false不显示
          modelBuildingShow:false,//模型构建与空间分析-功能启动图标按钮，默认false不显示
          statisticalAnalysisShow:false,//统计分析-功能启动图标按钮，默认false不显示
          attrQueryPanelShow:false,//属性查询-功能启动图标按钮，默认false不显示
          geometryQueryPanelShow:false,//几何空间查询-功能启动图标按钮，默认false不显示
          distanceQueryPanelShow:false,//距离查询-功能启动图标按钮，默认false不显示
          bufferAnalystPanelShow:false,//缓冲区分析-功能启动图标按钮，默认false不显示
          thiessenAnalystPanelShow:false,//(数据集)泰森多边形分析-功能启动图标按钮，默认false不显示
          heatMapAnalystPanelShow:false,//热力图分析-功能启动图标按钮，默认false不显示

          layerFlag: false, //图层选中显示红色小标志，默认false为隐藏
          legendFlag: false, //图例选中显示红色小标志，默认false为隐藏
          measureFlag:false, //测量选中显示红色小标志，默认false为隐藏
          hawkeyeFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
          decorateFlag:false, //鹰眼选中显示红色小标志，默认false为隐藏
          juanlianFlag:false, //卷帘选中显示红色小标志，默认false为隐藏
          regionFlag:false, //区域选中显示红色小标志，默认false为隐藏
          dtcxFlag:false, //地图查询选中显示红色小标志，默认false为隐藏
          attrTableFlag:true, //属性表格选中显示红色小标志，默认为true显示
          modelFlag:false, //属性表格选中显示红色小标志，默认false为隐藏
          attrQueryFlag:false, //属性查询-选中显示红色小标志，默认false为隐藏
          geometryQueryFlag:false, //几何空间查询-选中显示红色小标志，默认false为隐藏
          distanceQueryFlag:false, //距离查询-选中显示红色小标志，默认false为隐藏
          bufferAnalystFlag:false, //缓冲区分析-选中显示红色小标志，默认false为隐藏
          thiessenAnalystFlag:false, //(数据集)泰森多边形分析-选中显示红色小标志，默认false为隐藏
          heatMapAnalystFlag:false, //热力图分析-选中显示红色小标志，默认false为隐藏

          measureUrl:"https://iserver.supermap.io/iserver/services/map-world/rest/maps/World?prjCoordSys=%7B%22epsgCode%22:3857%7D",
          measureVectorLayer:null,
          measureInteraction:null,
          measureSource:null,
          measureFeature:null,

          highLightLayer: {},//用于高亮的图层
          highLightVector: {},//highLightLayer图层的源
          highLightStyle: {},//highLightLayer图层的style

          location_blue:"",
          location_green:"",

          //属性查询数据
          options: [
            {
              value: '南康区',
              label: '南康区'
            }, {
              value: '赣县区',
              label: '赣县区'
            }, {
              value: '信丰县',
              label: '信丰县'
            }, {
              value: '大余县',
              label: '大余县'
            }, {
              value: '上犹县',
              label: '上犹县'
            }, {
              value: '崇义县',
              label: '崇义县'
            }, {
              value: '安远县',
              label: '安远县'
            }, {
              value: '龙南县',
              label: '龙南县'
            }, {
              value: '定南县',
              label: '定南县'
            }, {
              value: '全南县',
              label: '全南县'
            }, {
              value: '宁都县',
              label: '宁都县'
            }, {
              value: '于都县',
              label: '于都县'
            }, {
              value: '兴国县',
              label: '兴国县'
            }, {
              value: '会昌县',
              label: '会昌县'
            }, {
              value: '寻乌县',
              label: '寻乌县'
            }, {
              value: '石城县',
              label: '石城县'
            }, {
              value: '瑞金市',
              label: '瑞金市'
            }, {
              value: '章贡区',
              label: '章贡区'
            }
          ],

          options2:[
            {
              value: '土特产',
              label: '土特产'
            }, {
              value: '名菜',
              label: '名菜'
            }, {
              value: '小吃',
              label: '小吃'
            }
          ],
          value1: [],
          value2: [],

          //热力图
          heatmap_radius: 45, //热力图-热点半径；默认45
          heatmap_blur: 70, //热力图-模糊尺寸；默认70

          //缓冲区分析
          buffer_radius:2000, //缓冲半径，默认2000

        }
    },
    methods:{
      togglePanel(attr,attr2){
        this[attr] = !this[attr];
        this[attr2] = !this[attr2];
      },
      initMyMap1(){
        let that = this;//以便在整个initMyMap方法体中的所有嵌套函数都能拿到thisVue

        //region定义Map和View
        var map = new Map({
          target: 'mapDiv',
          controls: defaults({attribution: false, zoom: false, rotate: false}), //默认取消ol自带的控件显示
          view: new View({
            projection: this.mapParams.projection, //例如：'EPSG:4326', //发布的影像原始坐标系为4326，必须加上此投影才能显示发布的影像
            //center: this.mapParams.center, //纯用4326时
            center: fromLonLat(this.mapParams.center), //例如：[127.87535, 43.58279] 或 [126.47535, 43.58279],//地图初始中心点
            minZoom: this.mapParams.minZoom, //例如：5，//可以缩小的最小级别;若为undefined表示无限制
            maxZoom: this.mapParams.maxZoom, //例如：19，//可以放大的最大级别；若为undefined表示无限制
            zoom: this.mapParams.zoom, //例如：6，//地图初始化时显示级别；注意：若此处未定义，地图初始化显示不出来
          })
        });
        this.map = map;//把地图传出去，以便外面调用
        //endregion

        //region自定义加载图层
        let lyrdata = this.lyrdata;
        this.baseMap = []
        for (let i = 0, len = lyrdata.length; i < len; i++) {
          let tmpLyrs = this.addLayerAtInit(lyrdata[i]);
          tmpLyrs.forEach(value => {
            this.baseMap.push(value);
            this.map.addLayer(value);
          }) //end fo forEach
        } //end of for
        //endregion

        //region手动测试加载图层
        // 加载天地图图层
        function addTdtLayer (type) {
          let layer = new Tile({
            source: new XYZ({
              url: 'http://t' + Math.round(Math.random() * 7) + '.tianditu.com/DataServer?T=' + type + '&tk=cc8b1a46f82b9042ceb3773a900a2a0a&x={x}&y={y}&l={z}',
              projection: 'EPSG:3857'
            })
          })
          layer.id = type
          return layer
        }
        //endregion

        //region地图版权控件
          let attrCtl = new Attribution({collapsed: true}); //true表示默认收缩
          map.addControl(attrCtl);
        //endregion

        //region缩放控件
          //zoom控件
          let myZoomControl = new Zoom();
          map.addControl(myZoomControl);

          //zoomBar控件
          let myZoomSlider = new ZoomSlider({})
          map.addControl(myZoomSlider);
        //endregion

        //region比例尺和坐标
          let scaleLineControl = new ScaleLine({
            units: 'metric',
            target: 'scaleBar',
            className: 'ol-scale-line'
          })
          this.map.addControl(scaleLineControl);
          //添加坐标
          let mousePositionControl = new MousePosition({
            coordinateFormat: createStringXY(5), //坐标小数位数
            className: 'custom-mouse-position',
            target: document.getElementById('mouse-position'),
            undefinedHTML: '&nbsp;',
            projection: 'EPSG:4326'
          })
          this.map.addControl(mousePositionControl);
        //endregion

        //region鹰眼快视控件
          let myOverviewMap = new OverviewMap({
              view: new View({
                projection: 'EPSG:3857',
                multiWorld: true
              }),
              collapsed: true, //true为默认折叠
              layers: [ addTdtLayer('img_w') ]
            })
          map.addControl(myOverviewMap);
        //endregion

        //region图层管理控件
        if (!document.body.classList.contains('hideOpacity')) {
          document.body.classList.add('hideOpacity')
          document.body.classList.add('hidePercent')
        }
        let lyrs = [];
        let switcher = new LayerSwitcher({
          target: document.querySelector('#' + this.lyrBox),
          show_progress: true, //在切片图层上显示进度条，默认为false
          reordering: true, //允许图层重新排序，默认值为true
          trash: false, //添加垃圾桶按钮以删除图层，默认为false
          extent: true, //添加范围按钮以缩放到图层范围
          //layerGroup: lyrsForLayerSwitcher //筛选出要显示的图层
        })
        //通过这种方式覆盖了LayerSwitcher.js源代码中的ol_control_LayerSwitcher.prototype.tip
        //从而重新定义了title提示信息
        switcher.tip = {
          up: '上下移动改变图层叠加顺序[up/down]',
          down: '往下[down]',
          info: '图层相关信息说明[informations...]',
          extent: '跳转到该图层最大范围[zoom to extent]',
          trash: '移除该图层[remove layer]',
          plus: '展开/收缩图层组[expand/shrink]'
        }
        map.addControl(switcher)
        //endregion 图层管理控件

        //region地图SQL查询并渲染在地图上
        if(this.spatialQueryConditions){
          console.log("this.spatialQueryConditions有值")
          this.spatialQueryConditions.forEach(item=>{
            console.log(item,"this.spatialQueryConditions",777);
            if(item.queryUrl && item.layerName){
              //console.log("满足条件，可以查询");
              MyQueryBySQLConditions(item);//调用查询
            }
          });
        }else{
            console.log("本页面尚未配置spatialQueryConditions……")
        }

        function MyQueryBySQLConditions({queryUrl,layerName,attributeFilter,dataProjection,featureProjection}){
          //要查询的服务地址
          //设置查询条件
          var param = new SuperMap.QueryBySQLParameters({
            queryParams: {
              name: layerName,
              attributeFilter:attributeFilter
            }
          });
          //执行SQL查询
          new QueryService(queryUrl).queryBySQL(param, function (serviceResult) {
            var vectorSource = new Vector({
              features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features,{   //终于发现可以通过在这里设置参数把查询结果从4326转到与地图视图相一致的3857坐标系了
                dataProjection: dataProjection,
                featureProjection:featureProjection
              }),
              wrapX: false
            });
            //新建矢量图层存放结果
            var resultLayer = new lVector({
              title:"SQL查询（初始化时）",
              source: vectorSource
            });
            //将结果添加到地图上
            map.addLayer(resultLayer);
          });
        }
        //endregion

        //region信息窗口相关
          let popup = new Popup (
            {	popupClass: "default", //"tooltips", "warning" "black" "default", "tips", "shadow","anim"
              closeBox: true,
              onshow: function(){ console.log("You opened the box"); },
              onclose: function(){ console.log("You close the box"); },
              positioning: 'auto',
              autoPan: true,
              autoPanAnimation: { duration: 750 }
            });
          map.addOverlay(popup); //一定要加到地图上，否则不显示；后续操作不要随意that.map.getOverlays().clear()移除overlay图层，否则将导致信息窗口显示不出来

          let featurePics = this.MYCONFIG.featurePics;
          let spatialQueryConditions = this.spatialQueryConditions;
              console.log("spatialQueryConditions:",spatialQueryConditions,676)

          function getHtml(features) {
              //创建属性框
              let html = '';
              html += `<div class="ol-popupfeature">`;
              //html += `<i class="ol-fix"></i>`
              html += `<table>`;
              html += `<tr><th>属性名称</th><th>属性值</th></tr>`;

              let f = features;
              //遍历各属性字段信息并放置到表格中
              for (const key in f.values_) {
                if (f.values_.hasOwnProperty(key)
                      && key != 'geometry'
                      && key != 'SmID'
                      && key != 'SmUserID'
                      && key != 'the_geom'
                      && key != 'PopupInfo'
                      && key != 'imgSrc'
                ) {
                  const element = f.values_[key];
                  if (element) {
                    html += `<tr><td>${key}</td><td>${element}</td></tr>`;
                  }
                }
              }

              //检测是否含有图片，若有则输出为html格式内容以便后续插入信息窗口中
              let picsDiv;
              //根据imgSrc属性字段的值来获取相关图片地址
              let imgSrcStr = f.values_["imgSrc"];
              if(imgSrcStr){
                    console.log("→优先使用方法1：属性直接读取图片地址法!!")
                 let imgSrcArr = imgSrcStr.split('**');
                 picsDiv = buildPicDivForFeature(imgSrcArr);
              }else if(spatialQueryConditions){
                 console.log("→使用方法2：配置信息读取图片地址法")
                 picsDiv = getPicsDivFromSpatialQueryConditions(f);
              }
              //如果有图片则把图片罗列出来
              if(picsDiv){
                html += picsDiv;
              }
              html += `</table>`;
              html += `</div>`;
              return html;
          } //end of getHtml()

          //（方法1）根据某要素图形所含的图片地址数组构建图片Div
          function buildPicDivForFeature(imgSrcArr){
            let picsDiv = "";
            imgSrcArr.forEach(item => {
              if(item){
                picsDiv += "<a href='" + item + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + item + "' width='120px;' height='90px;'></a>";
              }
            });
            picsDiv = "<tr>" +
              "<td  colspan='2'>" + picsDiv + "</td>" +
              "</tr>";
            return picsDiv;
          }

          //（方法2）根据SpatialQueryConditions来构建图片Div
          function getPicsDivFromSpatialQueryConditions(features){
            let myPicsDiv;
            spatialQueryConditions.forEach(item=>{
                    console.log("spatialQueryConditions的值为",item,8764321)
              if(item.keyField){
                myPicsDiv = whichFeatureHasPics(features.values_.SmID,features.values_[item.keyField]); //此处前面要承接picsDiv,否则图片出不来
              }
            });
            return myPicsDiv;
          }

          function whichFeatureHasPics(ags1,ags2){
            let picsDiv = "";
            /*注意，这里的featurePics输入全局变量引入了*/
            featurePics.forEach(item => {
              if (item[0] == ags1 && item[1] == ags2 ) { //经过测试，此处暂时不能用===恒等
                item[2].forEach(arr => {
                  picsDiv += "<a href='" + arr + "' target='_blank' style='display:inline-block;margin:10px;'><img src='" + arr + "' width='120px;' height='90px;'></a>";
                });
              }
            });
            picsDiv = "<tr>" +
              "<td  colspan='2'>" + picsDiv + "</td>" +
              "</tr>";
            return picsDiv;
          }

          //移除信息窗口
          function removePopup() {
              popup.setPosition(undefined);
              //closer.blur();
          }
          //图层信息框内容更新
          function updateInfoView(feature) {
              if (!feature && popup) {
                removePopup();
                return;
              }
              if(feature){
                let html = getHtml(feature);
                popup.show(feature.getGeometry().getCoordinates(), html);
              }
          } //end of updateInfoView()


          let sqcArr = that.MYCONFIG.spatialQueryConditions[that.pn]; //有值，或undefined
          if(sqcArr){
              sqcArr.forEach(item=>{
                map.on(item.mouseEventType, mouseEventLinstener);
              });
          }

          //（监听）地图单击、双击、悬浮等的全局事件
          //map.on('click', mouseEventLinstener); //map.on('pointermove', pointermoveLinstener);
          function mouseEventLinstener(e) {
              map.forEachFeatureAtPixel(e.pixel, function (feature,layer) {
                updateInfoView(feature);
              });
          }
        //endregion

        //region 热力图
        let hmaArr = that.MYCONFIG.heatMapAnalyst[that.pn]; //有值，或undefined
        if(hmaArr){
          hmaArr.forEach(item=>{
            document.getElementById("heatMapAnalyst").addEventListener("click", function(){
              createHeatPoints(item); //调用
            });

          });
        }
        let heatMapSource, heatMapLayer;
        function createHeatPoints({queryUrl,layerName,attributeFilter}){
          heatMapSource = new sHeatMap(
            "heatMap",
            {
              "map": map,
              "id": "heatmap",
              "radius": 45,
              //featureWeight指定以哪个属性值为热力权重值创建热力图：
              "featureWeight": "value",
            }
          );

          heatMapSource.useGeoUnit = true;

          //设置查询条件
          var param = new SuperMap.QueryBySQLParameters({
            queryParams: {
              name: layerName,
              attributeFilter:attributeFilter
            }
          });
          //执行SQL查询
          new QueryService(queryUrl).queryBySQL(param, function (serviceResult) {
            console.log(serviceResult.result.recordsets[0].features,777666)
            heatMapSource = new Vector({
             features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features, {   //终于发现可以通过在这里设置参数把查询结果从4326转到与地图视图相一致的3857坐标系了
             dataProjection: 'EPSG:4326',
             featureProjection: 'EPSG:3857'
             }),
             wrapX: false
             });

            var htMap = new lHeatMap({
              title:"热力图",
              source:heatMapSource,
              radius: that.heatmap_radius, //热点半径
              blur: that.heatmap_blur, //模糊尺寸
            });
            map.addLayer(htMap);
          });
        } //end of createHeatPoints(queryUrl)
        //endregion

        //region (数据集)缓冲区分析
        let hcqArr = that.MYCONFIG.bufferAnalyst[that.pn]; //有值，或undefined
        console.log(hcqArr,"that.MYCONFIG.bufferAnalyst[that.pn]");
        if(hcqArr){
          hcqArr.forEach(item=>{
            document.getElementById("bufferAnalyst").addEventListener("click", function(){
              console.log("（数据集）缓冲区分析");
              bufferAnalystProcess(item); //调用
            });

          });
        }
        function bufferAnalystProcess({queryUrl,layerName,attributeFilter}) {
          var dsBufferAnalystParameters = new SuperMap.DatasetBufferAnalystParameters({
            dataset: layerName,
            filterQueryParameter: new SuperMap.FilterParameter({
              attributeFilter: attributeFilter
            }),
            bufferSetting: new SuperMap.BufferSetting({
              endType: SuperMap.BufferEndType.ROUND,
              leftDistance: {value: that.buffer_radius},
              rightDistance: {value: that.buffer_radius}, //对线类型，不支持左右不对称的圆头缓冲
              semicircleLineSegment: 200  //圆头缓冲圆弧处线段的个数不能大于200
            })
          });
          new SpatialAnalystService(queryUrl).bufferAnalysis(dsBufferAnalystParameters, function (serviceResult) {
            console.log(serviceResult,"serviceResult",918918);
            var vectorSource = new Vector({
              features: (new GeoJSON()).readFeatures(serviceResult.result.recordset.features)
            });
            var resultLayer = new lVector({
              title:"(数据集)缓冲区分析结果",
              source: vectorSource,
              style: new Style({
                stroke: new Stroke({
                  color: 'red',
                  width: 1
                }),
                fill: new Fill({
                  color: 'rgba(255, 0, 0, 0.1)'
                })
              })
            });
            map.addLayer(resultLayer);
          });
        }
        //endregion

        //region (数据集)泰森多边形分析
        let tsArr = that.MYCONFIG.thiessenAnalyst[that.pn]; //有值，或undefined
        console.log(tsArr,"that.MYCONFIG.thiessenAnalyst[that.pn]");
        if(tsArr){
          tsArr.forEach(item=>{
            console.log(item,"that.MYCONFIG.thiessenAnalyst[that.pn].item")

            document.getElementById("thiessenAnalyst").addEventListener("click", function(){
              console.log("（数据集）泰森多边形分析");
              thiessenAnalystProcess(item); //调用
            });

          });
        }
        function thiessenAnalystProcess({queryUrl,layerName}) {
          var dThiessenAnalystParameters = new SuperMap.DatasetThiessenAnalystParameters({
            dataset: layerName
          });
          new SpatialAnalystService(queryUrl).thiessenAnalysis(dThiessenAnalystParameters, function (serviceResult) {
            console.log(serviceResult,"thiessenAnalystProcess_serviceResult",918000918);
            var vectorSource = new Vector({
              features: (new GeoJSON()).readFeatures(serviceResult.result.regions)
            });
            var resultLayer = new lVector({
              title:"(数据集)泰森多边形分析结果",
              source: vectorSource,
              style: new Style({
                stroke: new Stroke({
                  color: 'rgba(100, 100, 225, 10)',
                  width: 2
                }),
                fill: new Fill({
                  color: 'rgba(0, 0, 255, 0.1)'
                })
              })
            });
            map.addLayer(resultLayer);
          });
        }
        //endregion

      },

      //region初始化添加图层到地图里
      addLayerAtInit({lyrType,srcType,mUrl,mTitle,mName,mVisible,mSubLayers}){
        let that = this;
        let lyrArr = []
        let lyr = null
        if (lyrType === 'Tile' && srcType === 'TileSuperMapRest') {
          lyr = new Tile({
            title: mTitle,
            name: mName,
            visible: mVisible,
            projection: 'EPSG:3857',
            source: new TileSuperMapRest({
              url: mUrl,
              wrapX: true
            })
          })
          lyrArr.push(lyr)
        } else if (lyrType === 'Tile' && srcType === 'XYZ'){
            if (mTitle === "路网" || mTitle === "卫星" || mTitle === "文字标注") {
              lyr = new Tile({
                title: mTitle,
                name: mName,
                visible: mVisible,
                source: new XYZ({
                  url: mUrl,
                })
              })
            }
          lyrArr.push(lyr)
        } else if (lyrType === 'Group') {
          let lG = []
          for (let i = 0; i < mSubLayers.length; i++) {
            let lyr4tmps = null
            lyr4tmps = that.addLayerAtInit(mSubLayers[i])
            lyr4tmps.forEach(value => {
              lG.push(value)
            })
          }
          lyr = new Group({
            title: mTitle,
            visible: mVisible,
            layers: lG
          })
          lyrArr.push(lyr)
        } else {
          console.log(lyrType,srcType,mUrl,mTitle,'抱歉，地图资源类型不明，请检查并重试，或联系管理员协助解决。')
        }
        return lyrArr
      },
      //endregion

      //region地图量测（面积）
      myMeasureArea(){
        let that = this;
        that.myClearMeasure();//先清除先前的图形以避免干扰
        let vectorLayer, interaction, source,feature;
        source = new Vector({wrapX: false});
        vectorLayer = new lVector({
          title:"测面积overlay图层",
          source: source
        });
        this.map.addLayer(vectorLayer);
        this.measureVectorLayer=vectorLayer;

        interaction = new Draw({
          source: source,
          type: "Polygon",
        });

          this.measureInteraction = interaction;//传出去以便后续集中清理掉
        this.map.addInteraction(interaction);

        interaction.on('drawstart', function (evt) {
          feature = evt.feature;
        });
        interaction.on('drawend', function () {
          var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
          new MeasureService(that.measureUrl).measureArea(areaMeasureParam, function (serviceResult) {
            console.log(serviceResult.result.area, serviceResult.result.unit);
            alert(serviceResult.result.area+" 平方米");
          });
        });
      },
      //endregion

      //region地图量测（距离）
      myMeasureDistance(){
        let that = this;
        this.myClearMeasure();//先清除先前的图形以避免干扰
        let vectorLayer, interaction, source,feature;
        source = new Vector({wrapX: false});
        vectorLayer = new lVector({
          title:"测距离overlay图层",
          source: source
        });
        this.map.addLayer(vectorLayer);
        this.measureVectorLayer=vectorLayer;

        interaction = new Draw({
          source: source,
          type: "LineString",
        });

          this.measureInteraction = interaction;//传出去以便后续集中清理掉
        this.map.addInteraction(interaction);

        interaction.on('drawstart', function (evt) {
          feature = evt.feature;
        });
        interaction.on('drawend', function () {
          var areaMeasureParam = new SuperMap.MeasureParameters(feature.getGeometry());
          new MeasureService(that.measureUrl).measureArea(areaMeasureParam, function (serviceResult) {
            console.log(serviceResult.result.area, serviceResult.result.unit);
            alert(serviceResult.result.area+" 米");
          });
        });
      },
      //endregion

      //region地图量测（清除）
      myClearMeasure(){
        let that = this;
        that.map.removeLayer(that.measureVectorLayer);//清除图形
        that.map.removeInteraction(that.measureInteraction) //移除绘制图形的交互动作
        let ols = that.map.getOverlays();
        console.log(ols,333777)
        ols.clear() //把所有覆盖物（测量结果）都清楚掉
      },
      //endregion

      //region地图属性查询
      attrQuery(){
          let that=this;

          let queryUrl,layerName,attributeFilter;

          let sxcxArr = that.MYCONFIG.attrQuery[that.pn]; //有值，或undefined
          console.log(sxcxArr,"that.MYCONFIG.attrQuery[that.pn]",86543);

          if(sxcxArr){
            sxcxArr.forEach(item=>{
                  console.log(item,"that.MYCONFIG.attrQuery[that.pn].item",901)
              queryUrl = item.queryUrl;
              layerName = item.layerName;

            });
          }

          console.log(this.value1,"value1",911);
          console.log(this.value2,"value2",912);

          let q1arr = [];
          if(this.value1){
              this.value1.forEach(item=>{
                  console.log(item,"地理位置的each_item");
                  q1arr.push("地理位置 like '%"+item+"%'");
              });
          }
          console.log(q1arr,701);
          let q1str = getStringFromArray(q1arr);
          console.log(q1str,702);
          function getStringFromArray(arr) {
            var str = "";
            for (let i = 0; i < arr.length; i++) {
              str += arr[i]+ " or ";
            }
            //去掉最后一个or(包含四个字符）(如果不需要去掉，就不用写)
            if (str.length > 0) {
              str = str.substr(0, str.length - 4);
            }
            return str;
          }

          let q2str = "类型 like '%"+  this.value2 +"%'";

          attributeFilter = q1str + " and " + q2str;
          console.log(attributeFilter,703);

        let param = new SuperMap.QueryBySQLParameters({
          queryParams: {
            name:layerName,
            attributeFilter:attributeFilter,
          },
          prjCoordSys: {"epsgCode":3857}   //通过查阅API，在这里设置这个参数后，后续的serviceResult就不用再进行坐标转换了
        });
          console.log(param,"param参数情况",855);
        new QueryService(queryUrl).queryBySQL(param, function (serviceResult) {
            console.log(serviceResult,865865);
          let vectorSource = new Vector({
            features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
            wrapX: false
          });
          let resultLayer = new lVector({
            title:"属性查询结果图层",
            source: vectorSource,
            style:new Style({
              image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                anchor: [0.5, 0.9],
                src: that.location_green  //此处得用base64格式的图片源才能显示出来
              })
            })
          });
          that.map.addLayer(resultLayer);
        });


      },
      //endregion

      //region地图几何空间查询
      geometryQuery(){
        let that=this;

        let queryUrl,layerName,attributeFilter;

        let jhcxArr = that.MYCONFIG.geometryQuery[that.pn]; //有值，或undefined
            console.log(jhcxArr,"that.MYCONFIG.geometryQuery[that.pn]",86543);
        if(jhcxArr){
          jhcxArr.forEach(item=>{
            console.log(item,"that.MYCONFIG.geometryQuery[that.pn].item",901);
            queryUrl=item.queryUrl;
            layerName=item.layerName;

          });
        }

        this.myClearGeometryQuery();//先清除先前的图形以避免干扰

        let vectorLayer, interaction, source,feature;
        source = new Vector({wrapX: false});
        vectorLayer = new lVector({
          title:"几何查询的overlay图层",
          source: source,
          style: new Style({
            stroke: new Stroke({
              color: 'red',
              width: 3
            }),
          })
        });
        this.map.addLayer(vectorLayer);
        this.geometryQueryVectorLayer=vectorLayer;

        interaction = new Draw({
          source: source,
          type: "Polygon",
        });

        this.geometryQueryInteraction = interaction;//传出去以便后续集中清理掉
        this.map.addInteraction(interaction);

        interaction.on('drawstart', function (evt) {
          feature = evt.feature;
        });
        interaction.on('drawend', function () {

            that.map.removeInteraction(interaction) //移除绘制图形的交互动作

          let myGeometry = feature.getGeometry();
              console.log(myGeometry,765);
          getGeometryQueryResult(myGeometry);//执行几何空间查询
        });

        function getGeometryQueryResult(myGeometry){
          let param = new SuperMap.QueryByGeometryParameters({
            queryParams: {name: layerName},
            geometry: myGeometry,
            prjCoordSys: {"epsgCode":3857}   //通过查阅API，在这里设置这个参数后，后续的serviceResult就不用再进行坐标转换了
          });
              console.log(param,"几何查询参数为",764)
          new QueryService(queryUrl).queryByGeometry(param, function (serviceResult) {
            console.log(serviceResult,"几何查询serviceResult为",763)
            let vectorSource = new Vector({
              features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
              wrapX: false
            });
            let resultLayer = new lVector({
              title:"几何空间查询结果图层",
              source: vectorSource
            });
            that.map.addLayer(resultLayer);

            let myStyle = new Style({
              image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
                anchor: [0.5, 0.9],
                src: that.location_blue  //此处得用base64格式的图片源才能显示出来
              })
            });
            resultLayer.setStyle(myStyle)

          });
        }

      },
      //endregion

      //region（清除/取消）几何查询的图形
      myClearGeometryQuery(){
        let that = this;
        that.map.removeLayer(that.geometryQueryVectorLayer);//清除图形
        that.map.removeInteraction(that.geometryQueryInteraction) //移除绘制图形的交互动作
        let ols = that.map.getOverlays();
      },
      //endregion

      //region Test距离查询
      distanceQuery(){
        let that=this;

        let queryUrl,layerName,attributeFilter,distance;

        let jlcxArr = that.MYCONFIG.distanceQuery[that.pn]; //有值，或undefined
        console.log(jlcxArr,"that.MYCONFIG.distanceQuery[that.pn]",86543);
        if(jlcxArr){
          jlcxArr.forEach(item=>{
            console.log(item,"that.MYCONFIG.distanceQuery[that.pn].item",901)
            queryUrl=item.queryUrl;
            layerName=item.layerName;
            distance=item.distance;
          });
        }

        this.myClearDistanceQuery();//先清除先前的图形以避免干扰

        let vectorLayer, interaction, source,feature;
        source = new Vector({wrapX: false});
        vectorLayer = new lVector({
          title:"距离查询的overlay图层",
          source: source,
          style: new Style({
            image: new Icon({   //如果为'Point'类型的，则需要用这个image才能渲染出效果
              anchor: [0.5, 0.9],
              src: that.expandSrc  //此处得用base64格式的图片源才能显示出来
            })
          })
        });
        this.map.addLayer(vectorLayer);
        this.distanceQueryVectorLayer=vectorLayer;

        interaction = new Draw({
          source: source,
          type: "Point",
        });

        this.distanceQueryInteraction = interaction;//传出去以便后续集中清理掉
        this.map.addInteraction(interaction);

        interaction.on('drawstart', function (evt) {
          feature = evt.feature;
        });
        interaction.on('drawend', function () {
          that.map.removeInteraction(interaction) //移除绘制图形的交互动作

          let myGeometry = feature.getGeometry();
              console.log(myGeometry,765);
          getDistanceQueryResult(myGeometry);//执行距离查询
        });

        function getDistanceQueryResult(myPoint){
          var param = new SuperMap.QueryByDistanceParameters({
            queryParams: {name: layerName},
            geometry: myPoint,
            distance: distance, //查询的距离范围
            prjCoordSys: {"epsgCode":3857}   //通过查阅API，在这里设置这个参数后，后续的serviceResult就不用再进行坐标转换了
          });
          //创建距离查询实例
          new QueryService(queryUrl).queryByDistance(param, function (serviceResult) {
            var vectorSource = new Vector({
              features: (new GeoJSON()).readFeatures(serviceResult.result.recordsets[0].features),
              wrapX: false
            });
            let resultLayer = new lVector({
              title:"距离查询后的结果图层",
              source: vectorSource
            });
            that.map.addLayer(resultLayer);
          });
        }

      },
      //endregion

      //region（清除/取消）距离查询的图形
      myClearDistanceQuery(){
        let that = this;
        that.map.removeLayer(that.distanceQueryVectorLayer);//清除图形
        that.map.removeInteraction(that.distanceQueryInteraction) //移除绘制图形的交互动作
        let ols = that.map.getOverlays();
      },
      //endregion

      //透明度调节
      handleOpt() {
        document.body.classList.toggle('hideOpacity')
        document.body.classList.toggle('hidePercent')
      },

      //地图中的面板可拖动
      dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function(event) {
          var ev = event || window.event;
          event.stopPropagation();
          var disX = ev.clientX - Drag.offsetLeft;
          var disY = ev.clientY - Drag.offsetTop;
          document.onmousemove =
            function(event) {
              var ev = event ||
                window.event;
              Drag.style.left = ev.clientX - disX + "px";
              Drag.style.top = ev.clientY -
                disY + "px";
              Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function () {
          document.onmousemove = null;
          this.style.cursor = "default";
        };
      }
    },
    created(){
      //region 地图左上角-功能启动图标按钮-初始化控制
      if(this.mapCtrlTools !== undefined && this.mapCtrlTools.length>0){
        this.mapCtrlTools.forEach(item=>{
          if(item === 1){
            this.layerShow = true; //图层控制-功能启动图标按钮
          }else if(item === 2){
            this.legendShow = true;//图例-功能启动图标按钮
          }else if(item === 3){
            this.measureShow = true;//测量工具-功能启动图标按钮
          }else if(item === 4){
            this.hawkEyeShow = true; //鹰眼-功能启动图标按钮
          }else if(item === 5){
            this.juanlianShow = true; //卷帘-功能启动图标按钮
          }else if(item === 6){
            this.regionShow = true; //区域选择树-功能启动图标按钮
          }else if(item === 7){
            this.mapQueryShow = true; //地图查询-功能启动图标按钮
          }else if(item === 8){
            this.modelBuildingShow = true; //模型构建与空间分析-功能启动图标按钮
          }else if(item === 11){
            this.attrTableShow = true; //属性表格（抽屉）-功能启动图标按钮
          }else if(item === 12){
            this.statisticalAnalysisShow = true; //统计分析（抽屉）-功能启动图标按钮
          }else if(item === 13){
            this.decorateShow = true; //统计分析（抽屉）-功能启动图标按钮
          }else if(item === 31){
            this.attrQueryPanelShow = true; //属性查询-功能启动图标按钮
          }else if(item === 32){
            this.geometryQueryPanelShow = true; //几何空间查询-功能启动图标按钮
          }else if(item === 33){
            this.distanceQueryPanelShow = true; //距离分析-功能启动图标按钮
          }
          else if(item === 34){
            this.bufferAnalystPanelShow = true; //缓冲区分析-功能启动图标按钮
          }else if(item === 35){
            this.thiessenAnalystPanelShow = true; // (数据集)泰森多边形分析-功能启动图标按钮
          }
          else if(item === 36){
            this.heatMapAnalystPanelShow = true; //热力图分析-功能启动图标按钮
          }
        });
      }
      //endregion
    },
    mounted(){
      /*地图初始化*/
      this.initMyMap1();
      /*让地图中的某些面板可拖动*/
      //this.dragFunc("lyrBox");
      //this.dragFunc(this.lyrBox);
    },
    watch:{},
    computed:{
      lyrBox: function () {
        return 'lyrBoxDiv' + new Date().valueOf()
      }
    }
  }
</script>

<style scoped>

  @import '~ol-ext/dist/ol-ext.css';
  @import '../../assets/styles/my-ol-ext.css';

  .map-display {
    position: absolute;
    width: 100%;
    height:100%;
    background-color: darkgray;
  }

  /*地图工具栏相关样式  */
  .mytool-btns{
    position: relative;
    /*left: 10px;*/
    margin-left:2.5em;
    top: 10px;
    height: 60px;
    width:320px; /*以免ol-popup被地图工具按钮div给挡住而无法点击关闭面板按钮*/
  }

  .navbtn-items{
    float: left;
    margin: 0 5px;
    /*border-right: 1px solid #788897; !*显示右侧的边框线*!*/
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    text-align: center;
  }

  .navBtnDiv{
    /*width: auto;*/
    /*background-color:rgba(0,0,0,0);*/
    margin-left: 55px;
    /*margin-top: 5px;*/
  }
  .navbtn-btn{
    margin-right: 10px;
  }

  .navbtn-items:hover{
    cursor: pointer;
  }

  .navbtn-items>img{
    width:36px;
    height:36px;
    padding:5px;
  }
  .item-selected {
    position: absolute;
    width: 25px !important;
    height: 25px !important;
    left: 15px !important;
    bottom: 0;
  }

  .layer-hide {
    display:none;
  }

  /*右侧工具条对应面板*/
  /*工具项：图层管理&ndash;&gt;>对应面板*/
  .layerBox {
    width: 275px;
    padding: 5px;
    background-color: #ffffff;
    border: solid 1px #cecdd2;
    color: black;
    border-radius: 5px;
    /*display: none;*/ /*交由vue变量去控制*/
    position: absolute;
    z-index: 3;
    margin-left: 2.5em;
    box-shadow: 4px 4px 10px #888888;
  }

  #panelHeader {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    /* overflow-x: auto; */
  }

  .lyr-panel-title {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.1em;
    display: block;
    font-weight: bold;
    color: white;
    margin: 0.3em;
  }

  .lyropt {
    font-size: 14px;
    margin-left: 10px;
  }



  /*工具栏-（量测-整饰-控制-查询等）下拉框*/
  /*工具栏-（量测-整饰-控制-查询）下拉框-子项*/
  .map-tool-item{
    width: 85px;
    height: 29px;
    border-bottom: 1px solid #b4b4b4;
    cursor: pointer;
  }

  .map-tool-item>img{
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    margin-left: 5px;
  }

  .map-tool-item>span{
    display: block;
    float: left;
    width: 50px;
    height: 20px;
    margin-top: 4px;
    margin-left: 2px;
    line-height: 19px;
    text-align: center;
    font-size:12px;
    font-family:微软雅黑;
  }

  .map-tool-item-click{
    /*color: rgb(18,150,219);*/
    color: rgb(255,0,0);
  }
  /*工具项：量测-->>对应下拉面板*/
  .mapMeasurementTools{
    position:relative;

    width: 85px;
    left: 6em;

    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 5; /*高于lyrBox的3*/
  }

  /*工具项：整饰-->>对应下拉面板*/
  .mapDecorateTools{
    position:relative;
    width: 85px;
    left: 10em;
    background-color: #ffffff;
    box-shadow: 4px 4px 10px #888888;
    z-index: 4; /*高于lyrBox的3*/
  }

  /*地图整饰（坐标、比例尺、图例均通用）*/
  .map-decorate {
    position: absolute;
    z-index: 2;
  }
  /*比例尺位置*/
  /*用于覆盖原生比例尺的样式*/
  .ol-scale-line {
    background: #f39c12;
    border-radius: 4px;
    bottom: 8px;
    left: -20em; /*约等于16px*20=320px*/
    padding: 2px;
    position: absolute;
    height: 26px;
  }
  .map-scalebar{
    position:absolute;
    bottom:6px;
    left:10em;
  }
  /*坐标位置*/
  .map-coordinate{
    left:315px;
    /*right:105px;*/
    bottom:15px;
    /*top:10px;*/
    margin:2px 6px;
    padding: 2px 4px;
    font-family:Arial;
    color:#ffffff;
    background-color: #f39c12;
    /*min-width: 150px;*/
    border-radius: 4px;
    height: 20px;
  }

</style>
